import axios from 'axios'
import React, { useState} from 'react'
import {useNavigate} from 'react-router-dom'
export default function AddPatient() {
  const navigate=useNavigate()
  const [formData, setFormData] = useState({
    huanName: '',
    sex: '',
    age: '',
    desc: '',
    date: '',
    pl: ''
  })

  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData({
      ...formData,
      [name]: value
    })
  }

  // 提交表单
  const handleSubmit =  () => {
     axios.post('http://localhost:3000/addhuan',{
      huanName:formData.huanName,sex:formData.sex,
      age:formData.age,desc:formData.desc,date:formData.date,pl:formData.pl
     }).then((res)=>{
      if(res.data.code == 200){
         alert(res.data.msg)
         navigate('/forWork')

      }
     }).catch((error)=>{
        alert(error)
     })
  }
  // 设置样式
  const containerStyle = {
    maxWidth: '800px',
    margin: '30px auto',
    padding: '30px',
    backgroundColor: '#f0f8ff',
    borderRadius: '15px',
    boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
  }

  const headerStyle = {
    fontSize: '28px',
    color: '#2a5c8d',
    marginBottom: '25px',
    textAlign: 'center',
    fontWeight: '600',
    textTransform: 'uppercase'
  }

  const inputGroupStyle = {
    marginBottom: '20px',
    display: 'flex',
    alignItems: 'center',
    gap: '15px'
  }

  const labelStyle = {
    width: '120px',
    color: '#2a5c8d',
    fontWeight: '500'
  }

  const inputStyle = {
    flex: 1,
    padding: '10px',
    border: '2px solid #a8d0fe',
    borderRadius: '8px',
    fontSize: '16px',
    transition: 'all 0.3s ease',
    outline: 'none'
  }

  const buttonStyle = {
    backgroundColor: '#2a5c8d',
    color: 'white',
    padding: '12px 30px',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
    fontSize: '16px',
    fontWeight: '600',
    transition: 'all 0.3s ease',
    marginTop: '15px',
    ':hover': {
      backgroundColor: '#1d456e',
      transform: 'translateY(-2px)'
    }
  }
     return (
      <div style={containerStyle}>
      <h2 style={headerStyle}>添加患者信息</h2>
      
      <div style={inputGroupStyle}>
        <label style={labelStyle}>患者姓名：</label>
        <input
          style={inputStyle}
          type="text"
          name="huanName"
          value={formData.huanName}
          onChange={handleInputChange}
          placeholder="请输入患者全名"
        />
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>性别：</label>
        <select 
          style={inputStyle}
          name="sex"
          value={formData.sex}
          onChange={handleInputChange}
        >
          <option value="">请选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>年龄：</label>
        <input
          style={inputStyle}
          type="number"
          name="age"
          value={formData.age}
          onChange={handleInputChange}
          placeholder="请输入患者年龄"
        />
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>病情描述：</label>
        <textarea
          style={{...inputStyle, height: '100px'}}
          name="desc"
          value={formData.desc}
          onChange={handleInputChange}
          placeholder="请输入详细病情描述"
        />
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>日期：</label>
        <input
          style={inputStyle}
          type="date"
          name="date"
          value={formData.date}
          onChange={handleInputChange}
        />
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>评论：</label>
        <textarea
          style={{...inputStyle, height: '80px'}}
          name="pl"
          value={formData.pl}
          onChange={handleInputChange}
          placeholder="请输入备注信息"
        />
      </div>

      <div style={{ textAlign: 'center' }}>
        <button 
          style={buttonStyle}
          onClick={handleSubmit}
        >
          提交患者信息
        </button>
      </div>
    </div>
      )
    }
